<template>
  <view class="roc-app-update" v-show="value">
    <view class="mask"></view>
    <view class="main">
      <view class="title">{{ title }}</view>
      <view class="cont">
        <slot>
          <text>{{ content }}</text>
        </slot>
        <!-- 更新进度条 -->
        <view class="progress-box" v-if="isUpdateing">
          <view class="progress"><view class="line" :style="{ width: `${progress}%` }"></view></view>
          <view class="text">{{ progress }}%</view>
        </view>
        <!-- 更新按钮 -->
        <view class="btn-update" @click="handleUpdate" v-else>立即更新</view>
      </view>
      <!-- 关闭按钮 -->
      <view class="btn-close" @click="handleClose" v-if="!isUpdateing"></view>
    </view>
  </view>
</template>

<script>
/**
 * roc-app-update
 * @description 安卓app版本更新
 * @blog https://rocyuan666.github.io
 *
 * @property {Boolean}    value           显示隐藏更新弹窗
 * @property {String}     title           标题
 * @property {String}     content         内容
 * @property {String}     appDownloadUrl  下载app地址
 */
export default {
  name: 'roc-app-update',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '版本更新',
    },
    content: {
      type: String,
      default: '发现新版本，快去更新吧！',
    },
    appDownloadUrl: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      progress: 0,
      isUpdateing: false,
    }
  },
  methods: {
    /**
     * 版本更新
     */
    handleUpdate() {
      // #ifdef APP-PLUS
      this.progress = 0
      this.isUpdateing = true
      const downloadTask = uni.downloadFile({
        url: this.appDownloadUrl,
        success: downloadResult => {
          this.handleClose()
          if (downloadResult.statusCode === 200) {
            plus.runtime.install(
              downloadResult.tempFilePath,
              {
                // force: 是否强制安装
                // true表示强制安装，不进行版本号的校验；false则需要版本号校验，如果将要安装应用的版本号不高于现有应用的版本号则终止安装，并返回安装失败。 仅安装wgt和wgtu时生效，默认值 false。
                force: false,
              },
              function() {
                // 安装成功
                plus.runtime.restart()
              },
              function(error) {
                uni.showToast({
                  icon: 'none',
                  title: `安装失败！APK/${error.message}`,
                })
              }
            )
          } else {
            uni.showToast({
              icon: 'none',
              title: `app下载失败！`,
            })
          }
        },
        fail: error => {
          console.log('下载错误', error)
        },
      })
      downloadTask.onProgressUpdate(res => {
        this.progress = res.progress
      })
      // #endif
      // #ifndef APP-PLUS
      uni.showToast({
        icon: 'none',
        title: '无需更新',
      })
      // #endif
    },
    /**
     * 关闭更新弹窗
     */
    handleClose() {
      this.progress = 0
      this.isUpdateing = false
      this.$emit('input', false)
    },
  },
}
</script>

<style lang="scss" scoped>
.roc-app-update {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999999;
  .mask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999998;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .main {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 99999999;
    width: 76vw;
    transform: translate(-50%, -66%);
    background: url(./images/bg_top.png) no-repeat;
    background-size: 100% 130px;
    overflow: hidden;
    .title {
      position: absolute;
      left: 20px;
      top: 56px;
      color: #fff;
      font-size: 24px;
    }
    .btn-close {
      width: 30px;
      height: 30px;
      margin: 0 auto;
      margin-top: 20px;
      background: url(./images/app_update_close.png) no-repeat;
      background-size: 100% 100%;
    }
    .cont {
      box-sizing: border-box;
      padding: 16px;
      margin-top: 126px;
      background-color: #fff;
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;
      line-height: 1.5;
      .btn-update {
        width: 90%;
        height: 38px;
        margin: 10px auto 0;
        line-height: 38px;
        text-align: center;
        border-radius: 18px;
        color: #fff;
        background: linear-gradient(90deg, #67affc, #1384fa);
        transition: all 0.3s;
        &:active {
          background: linear-gradient(90deg, #4099fb, #1384fa);
        }
      }
      .progress-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0;
        .progress {
          flex: 1;
          border: 1px solid #67affc;
          height: 10px;
          border-radius: 5px;
          overflow: hidden;
          .line {
            height: 100%;
            background-color: #4099fb;
          }
        }
        .text {
          width: 50px;
          text-align: right;
        }
      }
    }
  }
}
</style>
